<section class="content-header">
  <h1>Organizations ({{$ctrl.pagination.total}})</h1>
</section>

<section class="content">
  <div class="box paginable-page">
    <div class="box-header">
      <form ng-submit="$ctrl.applyFilters()">
        <div class="table-toolbar">         
          <button class="btn btn-primary pull-left mr-m" type="button" ng-click="$ctrl.openModal('add')"><i class="fa fa-plus"></i> Add organization</button>

          <label class="form-control pull-left">Status</label>    
          <multiselect class="pull-left mr-xs" ng-model="$ctrl.filters.status" options="$ctrl.statuses" placeholder="Select" show-select-all="true"
            show-unselect-all="true" classes-btn="($ctrl.filters.status.length > 0) ? 'btn-block btn-primary' : 'btn-default btn-block'">
          </multiselect>
    
          <label class="form-control pull-left">Description</label>
          <input type="text" class="form-control pull-left mr-xs" placeholder="Search for description" ng-model="$ctrl.filters.search">
          <button class="pull-left btn btn-primary" type="submit">Search</button> 
          <button class="pull-left btn btn-clear text-danger ml-xxxs" type="button" ng-click="$ctrl.clearFilters()"><i class="fa fa-times-circle"></i> Clear</button>
    
          <select class="ml-xxxs form-control pull-right" ng-model="$ctrl.pagination.pageSize" ng-change="$ctrl.load()" ng-options="v as (v + ' / page') for v in [10, 50, 100, 1000]"></select>
          <ul class="pull-right" ng-show="$ctrl.pagination.total > $ctrl.pagination.pageSize" uib-pagination total-items="$ctrl.pagination.total"
            ng-change="$ctrl.load()" ng-model="$ctrl.pagination.current" boundary-links="true" items-per-page="$ctrl.pagination.pageSize"
            previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;" max-size="3" rotate="false"></ul>
        </div>
      </form>
    </div>
    <div class="box-body">
      <div class="row mv-s" ng-if="$ctrl.organizations.length === 0">
        <div class="col-md-12">
          <div class="empty-message">No organizations defined.</div>
        </div>
      </div>

      <div class="row" ng-if="$ctrl.organizations.length > 0">
        <div class="col-sm-12 flex-table">
          <div class="flex-header media">
            <div class="flex-col flex-w-100 text-center">Status</div>
            <div class="flex-col flex-1">Organization</div>                  
            <div class="flex-col flex-w-100"></div>
            <div class="flex-col flex-w-100"></div>                  
          </div>

          <div class="flex-row media" ng-repeat="org in $ctrl.organizations track by org.id">
            <div class="flex-col flex-w-100 vertical centered">
              <span class="label label-default label-lg" ng-class="{'Active': 'label-success'}[org.status]">{{org.status}}</span>
            </div>
            <div class="flex-col flex-1">
              <h4 class="media-heading">
                <a href ui-sref="main.organization({id: org.id})">{{org.id}}</a>
              </h4>
              <span class="text-muted">{{org.description}}</span>
            </div>  
            <div class="flex-col flex-icon flex-w-100" ng-click="$ctrl.openModal('edit', org)">
              <a href>
                <i class="fa fa-pencil"></i>Edit</a>
            </div>
            <div class="flex-col flex-icon flex-w-100" ng-click="$ctrl.enable(org.id)" ng-if="org.status === 'Locked'">
            <a href class="text-success" ng-if="org.id !== 'cortex'">
                <i class="fa fa-refresh"></i>Enable</a>
            </div>
            <div class="flex-col flex-icon flex-w-100" ng-click="$ctrl.disable(org.id)" ng-if="org.status === 'Active'">
              <a href class="text-danger" ng-if="org.id !== 'cortex'">
                <i class="fa fa-ban"></i>Disable</a>
            </div>

          </div>
        </div>
      </div>
    </div>
    <div class="box-footer clearfix">
      <div class="box-tools btn-toolbar pull-right">
        <ul ng-show="$ctrl.pagination.total > $ctrl.pagination.pageSize" uib-pagination total-items="$ctrl.pagination.total" ng-change="$ctrl.load()"
          ng-model="$ctrl.pagination.current" boundary-links="true" items-per-page="$ctrl.pagination.pageSize" previous-text="&lsaquo;"
          next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;" max-size="3" rotate="false"></ul>
        <select class="ml-xs form-control pull-right " ng-model="$ctrl.pagination.pageSize" ng-change="$ctrl.load()" ng-options="v as (v + ' / page') for v in [10, 50, 100, 1000]"></select>
      </div>
    </div>
  </div>
</section>

